<template>
  <div class="app-container">
    <HeaderTool  @selectDate="selectDate"  @exportExcel="exportExcel"></HeaderTool>
    <!--  卡片  -->
    <el-row :gutter="20">
      <el-col  v-for="(card, index) in cardList" :key="index"
               style="margin-top: 20px;"
               :xs="24" :sm="12" :md="12" :lg="6">
        <el-card  class="padding-top-bottom-16 padding-left-right-6 flex-auto">
          <div class="flex justify-content-space-between">
            <div class="title">{{ card.title }}</div>
            <!--          <img alt="" class="icon" :src="card.icon">-->
          </div>
          <div class="count">{{ card.count }} %</div>
          <div :class="card.status" class="analyze">{{ card.analyze }}</div>
        </el-card>
      </el-col>
    </el-row>
    <!--  三列图表 -->
    <el-row :gutter="20">
      <el-col style="margin-top: 20px;" :xs="24" :sm="24" :md="8" :lg="8">
        <EchartsComponent :options="chartOption0" class="charts-common flex-auto" style="margin-right: 10px;"></EchartsComponent>
      </el-col>
      <el-col style="margin-top: 20px;" :xs="24" :sm="24" :md="8" :lg="8" class="flex align-center">
        <EchartsComponent :options="chartOption1" class="charts-common flex-auto" ></EchartsComponent>
      </el-col>
      <el-col style="margin-top: 20px;" :xs="24" :sm="24" :md="8" :lg="8">
        <EchartsComponent :options="chartOption2" class="charts-common flex-auto" style="margin-left: 10px;"></EchartsComponent>
      </el-col>
    </el-row>
    <!--  三列图表 -->
    <el-row :gutter="20" style="margin-bottom: 20px">
      <el-col style="margin-top: 20px;" :xs="24" :sm="24" :md="8" :lg="8">
        <EchartsComponent :options="chartOption3" class="charts-common flex-auto" style="margin-right: 10px;"></EchartsComponent>
      </el-col>
      <el-col style="margin-top: 20px;" :xs="24" :sm="24" :md="8" :lg="8">
        <EchartsComponent :options="chartOption4" class="charts-common flex-auto" style="margin: 0 10px; "></EchartsComponent>
      </el-col>
      <el-col style="margin-top: 20px;" :xs="24" :sm="24" :md="8" :lg="8">
        <EchartsComponent :options="chartOption5" class="charts-common flex-auto" style="margin-left: 10px;"></EchartsComponent>
      </el-col>
    </el-row>
    <CustomDialog v-model:analyzeDialogVisible="analyzeDialogVisible"></CustomDialog>
  </div>
</template>
<script setup>
import {ref} from 'vue';
import EchartsComponent from "@/components/ECharts/index.vue";
import HeaderTool from "@/components/HeaderTool/index.vue";
import DateUtils from "@/utils/utils.js";
import {getFunctionPatient, GetRatioInfo} from "@/api/quality/feature.js";
import {getEnergyRMBRatio, getMedicalRatio, getRevenueRatio} from "@/api/efficiency/fundStructure.js";

const analyzeDialogVisible = ref(false);
const selectDate = (time) => {
  getAllData({starTime: time[0], endTime: time[1]})
};
// 导出excel文件
const exportExcel = () => {
  console.log("导出excel文件")
  analyzeDialogVisible.value = true;
};
const cardList = ref([
  {
    title: '门诊收入占医疗收入比例',
    count: 2847,
    icon:new URL('@/assets/static/门诊人次数.png', import.meta.url).href,
    analyze: '较昨日增长2.8 %',
    status: 'increase'
  },
  {
    title: '门诊收入中来自医保基金的比例',
    count: 1500,
    icon:new URL('@/assets/static/出院人次数.png', import.meta.url).href,
    analyze: '较昨日持平',
    status: 'decrease'
  },
  {
    title: '住院收入占医疗收入比例',
    count: 1500,
    icon:new URL('@/assets/static/手术台次数.png', import.meta.url).href,
    analyze: '较昨日持平',
    status: 'increase'
  },
  {
    title: '住院收入中来自医保基金的比例',
    count: 1200,
    icon:new URL('@/assets/static/下转患者数.png', import.meta.url).href,
    analyze: '较昨日下降1.5 %',
    status: 'decrease'
  }
]);

const chartOption0 = ref({
  title: {
    text: '医疗服务类型占比',
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    right: '0',
    top: 'center',
    data: ['门诊', '住院', '其他']
  },
  series: [
    {
      name: '服务类型',
      type: 'pie',
      radius: ['40%', '70%'], // 设置为环形图
      avoidLabelOverlap: false,
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: '16',
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: [
        { value: 30, name: '门诊' },
        { value: 50, name: '住院' },
        { value: 20, name: '其他' }
      ]
    }
  ]
});
const chartOption1 = ref({
  title: {
    text: '辅助用药收入占比',
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    right: '0',
    top: 'center',
    data: ['基础用药', '辅助用药']
  },
  series: [
    {
      name: '辅助用药收入占比',
      type: 'pie',
      radius: '60%', // 环形图
      center: ['50%', '50%'], // 图表中心位置
      avoidLabelOverlap: true,
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: '16',
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      color: ['#5470C6', '#91CC75'],
      data: [
        { value: 60, name: '基础用药' },
        { value: 40, name: '辅助用药' }
      ]
    }
  ]
});
const chartOption2 = ref({
  title: {text: '人员经费占比'},
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical', // 图例垂直排列
    left: 'right', // 图例放置在右侧
    top: 'center', // 图例垂直居中
  },
  series: [
    {
      name: '人员经费占比',
      type: 'pie',
      radius: ['40%', '70%'],
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 10,
        borderColor: '#fff',
        borderWidth: 2
      },
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: 22,
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: true
      },
      data: [
        {value: 1048, name: '医生'},
        {value: 735, name: '护士'},
        {value: 580, name: '医技'},
        {value: 484, name: '行政'},
        {value: 484, name: '其他'}
      ]
    }
  ]
});
const chartOption3 = ref({
  title: { text: '万元收入能耗占比' },
  tooltip: {
    trigger: 'axis',  // 触发类型为坐标轴
    axisPointer: {
      type: 'cross'   // 十字准星指示器
    }
  },
  xAxis: {
    type: 'category',
    data: ['1月', '2月', '3月', '4月', '5月', '6月']
  },
  yAxis: {
    type: 'value',
    // 格式化 Y 轴刻度标签为百分比形式
    axisLabel: {
      // formatter: '{value}'
    }
  },
  series: [
    {
      data:[2110, 44, 12, 75, 19,34,52],
      type: 'line',
      areaStyle: {
        color: '#C6D5FC' // 设置阴影颜色为浅蓝色，透明度 0.5
      }
    }
  ],
  grid: {
    left: '5%',
    right: '5%',
    top: '20%',
    bottom: '5%',
    containLabel: true
  },
});
const chartOption4 = ref({
  title: { text: '医疗盈余率' },
  tooltip: {
    trigger: 'axis',  // 触发类型为坐标轴
    axisPointer: {
      type: 'cross'   // 十字准星指示器
    }
  },
  xAxis: {
    type: 'category',
    data: ['1月', '2月', '3月', '4月', '5月', '6月']
  },
  yAxis: {
    type: 'value',
    // 格式化 Y 轴刻度标签为百分比形式
    axisLabel: {
      formatter: '{value}%'
    }
  },
  series: [
    {
      data:[20, 44, 12, 75, 19,34,52],
      type: 'line',
      areaStyle: {
        color: '#C6D5FC' // 设置阴影颜色为浅蓝色，透明度 0.5
      }
    }
  ],
  grid: {
    left: '5%',
    right: '5%',
    top: '20%',
    bottom: '5%',
    containLabel: true
  },
});
const chartOption5 = ref({
  title: { text: '资产负债率' },
  tooltip: {
    trigger: 'axis',  // 触发类型为坐标轴
    axisPointer: {
      type: 'cross'   // 十字准星指示器
    }
  },
  xAxis: {
    type: 'category',
    data: ['1月', '2月', '3月', '4月', '5月', '6月']
  },
  yAxis: {
    type: 'value',
    // 格式化 Y 轴刻度标签为百分比形式
    axisLabel: {
      formatter: '{value}%'
    }
  },
  series: [
    {
      data:[20, 44, 12, 75, 19,34,52],
      type: 'line',
      areaStyle: {
        color: '#C6D5FC' // 设置阴影颜色为浅蓝色，透明度 0.5
      }
    }
  ],
  grid: {
    left: '5%',
    right: '5%',
    top: '20%',
    bottom: '5%',
    containLabel: true
  },
});

const input1 = ref("Month");
const input2 = ref("Month");
const input3 = ref("Month");
const input4 = ref("Month");
const input5 = ref("Month");
const input6= ref("Month");

const selectEnergy = async () => {
  await energyRMBRatio({timeType: input3.value})
};

const selectSurplus = async () => {
  await medicalRatio({timeType: input4.value})
};

// 获取各项收入占比信息
const revenueRatio = async (params) => {
  let result = await getRevenueRatio();
  let data = result.data.data;
  if (result.status == 200 && result.data.code == 200){
    console.log("data: ",data)
    cardList.value[0].count = data.today_OPDMedicalRatio;
    cardList.value[0].analyze = data.opdMedicalRatio > 0 ? `较昨日增长${data.opdMedicalRatio} %` : data.opdMedicalRatio < 0 ? `较昨日下降${data.opdMedicalRatio} %` : '较昨日持平';
    cardList.value[0].status = data.opdMedicalRatio > 0 ? 'increase' : data.opdMedicalRatio < 0 ? 'decrease' : 'fair';

    cardList.value[1].count = data.today_OPDUKRevenueRatio;
    cardList.value[1].analyze = data.opdukRevenueRatio > 0 ? `较昨日增长${data.opdukRevenueRatio} %` : data.opdukRevenueRatio < 0 ? `较昨日下降${data.opdukRevenueRatio} %` : '较昨日持平';
    cardList.value[1].status = data.opdukRevenueRatio > 0 ? 'increase' : data.opdukRevenueRatio < 0 ? 'decrease' : 'fair';

    cardList.value[2].count = data.today_InpatientMedicalRatio;
    cardList.value[2].analyze = data.inpatientMedicalRatio > 0 ? `较昨日增长${data.inpatientMedicalRatio} %` : data.inpatientMedicalRatio < 0 ? `较昨日下降${data.inpatientMedicalRatio} %` : '较昨日持平';
    cardList.value[2].status = data.inpatientMedicalRatio > 0 ? 'increase' : data.inpatientMedicalRatio < 0 ? 'decrease' : 'fair';

    cardList.value[3].count = data.today_InpatientUKRatio;
    cardList.value[3].analyze = data.inpatientUKRatio > 0 ? `较昨日增长${data.inpatientUKRatio} %` : data.inpatientUKRatio < 0 ? `较昨日下降${data.inpatientUKRatio} %` : '较昨日持平';
    cardList.value[3].status = data.inpatientUKRatio > 0 ? 'increase' : data.inpatientUKRatio < 0 ? 'decrease' : 'fair';

  }
}

// 获取能耗收入占比
const energyRMBRatio = async (params) => {
  let result = await getEnergyRMBRatio(params);
  let data = result.data.data;
  if (result.status == 200 && result.data.code == 200){
     const seriesData = [];
     const xAxis = [];
     data.forEach(item=>{
       seriesData.push(Number(item.countRatio));
       if (input3.value == "Month"){
          xAxis.push(item.month + "月");
       }
       if (input3.value == "Day"){
         xAxis.push(item.day + "日");
       }
     })
    chartOption3.value.xAxis.data = xAxis;
    chartOption3.value.series[0].data = seriesData;
  }
}

// 获取医疗盈余占比
const medicalRatio = async (params) => {
  let result = await getMedicalRatio(params);
  let data = result.data.data;
  if (result.status == 200 && result.data.code == 200){
    const seriesData = [];
    const xAxis = [];
    data.forEach(item=>{
      seriesData.push(Number(item.countRatio));
      if (input4.value == "Month"){
        xAxis.push(item.month + "月");
      }
      if (input4.value == "Day"){
        xAxis.push(item.day + "日");
      }
    })
    chartOption4.value.xAxis.data = xAxis;
    chartOption4.value.series[0].data = seriesData;
  }
}


// 加载界面所有数据
const getAllData = (time)=>{
  revenueRatio(time)
  energyRMBRatio({timeType: input3.value})
  medicalRatio({timeType: input4.value})
}

getAllData({
  starTime: DateUtils.formatDate(DateUtils.now(),"yyyy-MM-dd"),
  endTime: DateUtils.formatDate(DateUtils.now(),"yyyy-MM-dd")
});








</script>
<style lang='scss' scoped>
.app-container {
  height: calc(100vh - 84px);
  overflow-y: scroll;
  /* 针对 WebKit 内核浏览器（如 Chrome、Safari） */
  scrollbar-width: none;
  -ms-overflow-style: none;
  .el-card {
    border-radius: 13px;
    border: none;
  }
  .title {
    font-size: 16px;
    color: #858E98;
  }
  .icon {
    height: 20px;
  }
  .count {
    color: #464646;
    font-size: 26px;
    font-weight: 600;
    padding: 14px 0;
  }
  .analyze {
    font-size: 16px;
  }
  .increase {
    color: #00C94F;
  }
  .decrease {
    color: #FF3643;
  }
  .fair {
    color: #8F95A1;
  }
  .charts-common {
    border-radius: 10px;
    padding: 20px;
    box-sizing: border-box;
    height: 300px;
  }
  .data-table-container {
     .sub-title{
        color: #464646;
        font-size: 20px;
        margin: 10px 0;
        font-weight: bolder;
     }
  }

}
</style>
